<template>
	<!-- 搜索框 -->
	<view class="search-container">
		<u-search v-model="keyword" placeholder="请输入商品名称" @search="doSearch" @clear="handleClear" shape="round"
			bg-color="#ffffff" :show-action="false" :clearabled="true"></u-search>
	</view>

	<!-- 筛选栏 -->
	<view class="filter-bar">
		<scroll-view scroll-x class="scroll-view">
			<view class="filter-item" :class="{active: sortType === 'default'}" @click="changeSort('default')">综合</view>
			<view class="filter-item" :class="{active: sortType === 'price'}" @click="changeSort('price')">价格
				<u-icon :name="sortOrder === 'asc' ? 'arrow-up' : 'arrow-down'" size="12" v-if="sortType === 'price'" />
			</view>
			<view class="filter-item" :class="{active: sortType === 'update'}" @click="changeSort('update')">最新</view>
			<view class="filter-item" :class="{active: sortType === 'create'}" @click="changeSort('create')">最旧</view>
		</scroll-view>
	</view>

	<!-- 商品列表 -->
	<view class="goods-list">
		<view class="goods-item" v-for="item in searchResults" :key="item.goodsId"
			@click="navigateToDetail(item)">
			<image class="goods-image" :src="item.image.split(',')[0]" mode="aspectFill"></image>
			<view class="goods-info">
				<view class="title u-line-2">{{item.goodsName}}</view>
				<view class="price">¥{{item.price}}</view>
				<view class="meta">
					<text class="category">{{item.categoryName}}</text>
					<u-icon name="clock" size="12" color="#999"></u-icon>

				</view>
			</view>
		</view>

		<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		searchApi
	} from '../../api/index.js'

	const keyword = ref('')
	const searchResults = ref([])
	const currentPage = ref(1)
	const loadStatus = ref('loadmore')
	const sortType = ref('default')
	const sortOrder = ref('desc')

	// 加载状态配置
	const iconType = ref('circle')
	const loadText = ref({
		loadmore: '上拉加载更多',
		loading: '正在加载...',
		nomore: '没有更多了'
	})


	// 执行搜索
	const doSearch = async () => {
		currentPage.value = 1
		loadStatus.value = 'loading'

		try {
			const res = await searchApi({
				currentPage: currentPage.value,
				pageSize: 10,
				keyword: keyword.value,
				sortType: sortType.value === 'default' ? null : sortType.value,
				sortOrder: sortOrder.value
			})

			if (res && res.code === 200) {
				searchResults.value = res.data.records
				loadStatus.value = res.data.current < res.data.pages ? 'loadmore' : 'nomore'
			}
		} catch (error) {
			console.error('搜索失败:', error)
			loadStatus.value = 'loadmore'
		}
	}

	// 清除搜索
	const handleClear = () => {
		keyword.value = ''
		doSearch()
	}

	// 切换排序方式
	const changeSort = (type) => {
		if (sortType.value === type && type === 'price') {
			sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
		} else {
			sortType.value = type
			sortOrder.value = 'desc'
		}
		doSearch()
	}

	// 点击商品跳转时
	const navigateToDetail = (item) => {
		uni.navigateTo({
			url: `/pages/detail/detail?goods=` + JSON.stringify(item)
		})
	}
	// 初始化加载
	onLoad((options) => {
		if (options.keyword) {
			keyword.value = options.keyword
			  console.log('接收到的关键词:', keyword.value)
		}
		doSearch()
	})

	// 触底加载更多
	onReachBottom(() => {
		if (loadStatus.value === 'loadmore') {
			currentPage.value++
			doSearch()
		}
	})
</script>

<style lang="scss">
	.search-container {
		padding: 20rpx;
		background-color: #fff;
	}

	.filter-bar {
		padding: 20rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f5f5f5;

		.scroll-view {
			white-space: nowrap;

			.filter-item {
				display: inline-block;
				padding: 10rpx 20rpx;
				margin-right: 20rpx;
				font-size: 28rpx;
				color: #666;
				border-radius: 30rpx;
				background-color: #f5f5f5;

				&.active {
					color: #fff;
					background-color: #2979ff;
				}
			}
		}
	}

	.goods-list {
		padding: 20rpx;

		.goods-item {
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

			.goods-image {
				width: 100%;
				height: 300rpx;
			}

			.goods-info {
				padding: 20rpx;

				.title {
					font-size: 28rpx;
					color: #333;
					line-height: 1.4;
				}

				.price {
					font-size: 32rpx;
					color: #f56c6c;
					font-weight: bold;
					margin: 10rpx 0;
				}

				.meta {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;

					.category {
						flex: 1;
					}

					.time {
						margin-left: 5rpx;
					}
				}
			}
		}
	}
</style>